<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/tailwindcss/2.0.4/tailwind.min.css" rel="stylesheet">
    <style>
        #dt-id {
            display: grid;
            place-items: center;
            margin-bottom: 20px;
            height: 100px;
            background-color: #ff6b81;
            color: #fff;
            font-weight: 700;
            border-radius: 4px;
        }

        button {
            background-color: #eee;
            padding: 6px 10px;
            margin-right: 10px;
            margin-bottom: 10px;
            outline: none;
        }

        button:focus {
            outline: none;
        }
    </style>
    <script>
        const clickToAlert = () => alert()

        const clickToConfirm = () => {
            const result = confirm("确认要删除吗？")
            result ?
                alert('点击了确认') :
                alert('点击了取消')
        }

        const clickToPrompt = () => {
            const result = prompt("请输入内容", "这是默认的内容")
            alert(result)
        }

        const testSetTimeout = () => {
            const timer = setTimeout(() => alert(123), 1000)
            // testClearTimeout(timer)
        }

        const testClearTimeout = (timer) => {
            clearTimeout(timer)
        }

        const testSetInterval = () => {
            const timer = setInterval(() => {
                console.log(111)
            }, 1000)
            testClearInterval(timer)
        }

        const testClearInterval = (timer) => {
            setTimeout(() => {
                clearInterval(timer)
            }, 3000)
        }


        const DOMTest = () => {
            const dtId = document.querySelector('#dt-id')
            console.log(dtId)

            const dtInput = document.querySelector('#dt-input')
            console.log(dtInput.type)
        }

        const DOMTreeTest = () => {

        }

        const dtIdClickEvent = () => {
            const dtId = document.querySelectorAll('#dt-id')
            const { innerHTML, tagName, className } = dtId[0]
            const node = {
                innerHTML,
                tagName,
                className
            }
            console.log(dtId)
            console.table(node)
        }

        const dtInputClickEvent = () => {
            const input = document.querySelector('[name="userName"]')
            // const input = document.getElementsByName('userName')
            console.log('元素的属性:', input.value)
            console.log('元素的自定义属性:', input.getAttribute('data-myAttr'))
        }

        window.onload = () => {
            DOMTest()
            DOMTreeTest()
        }
    </script>
</head>

<body>
    <div class="bg-indigo-600">
        <div class="max-w-7xl mx-auto py-3 px-3 sm:px-6 lg:px-8">
            <div class="flex items-center justify-between flex-wrap">
                <div class="w-0 flex-1 flex items-center">
                    <span class="flex p-2 rounded-lg bg-indigo-800">
                        <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none"
                            viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z" />
                        </svg>
                    </span>
                    <p class="ml-3 font-medium text-white truncate">请打开控制台查看</p>
                </div>
            </div>
        </div>
    </div>


    <h1 class="text-4xl my-7 text-center text-red-500">Learn BOM & DOM!</h1>
    <main class="w-96 my-0 mx-auto p-10 border rounded-lg shadow-sm ">

        <h1 class="text-lg font-bold my-3">BOM</h1>
        <button class="shadow-md focus:ring" onclick="clickToAlert()">alert</button>
        <button class="shadow-md focus:ring" onclick="clickToConfirm()">confirm</button>
        <button class="shadow-md focus:ring" onclick="clickToPrompt()">prompt</button>
        <button class="shadow-md focus:ring" onclick="testSetTimeout()">setTimeout</button>
        <button class="shadow-md focus:ring" onclick="testSetInterval()">setInterval</button>



        <h1 class="text-lg font-bold my-3">DOM</h1>
        <div id="dt-id" class="dt-el shadow-md cursor-pointer" onclick="dtIdClickEvent()">点击获取元素属性</div>
        <input class="boder-2" id="dt-input" data-myAttr="custom attr value" name="userName" value="Tom"
            onclick="dtInputClickEvent()" type="text">

        <h1 class="text-lg font-bold my-3">Clock</h1>

    </main>
</body>
</html>
